import React, { useState, useEffect, useContext } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Autoplay, Pagination } from 'swiper'
import 'swiper/swiper-bundle.min.css'

import axiosContext from '@/hooks/axiosContext'
import useFetch from '@/hooks/useFetch'

import {HomeSwiperWrapper} from './styledHome'

SwiperCore.use([Autoplay,Pagination])

export default function HomeSwiper() {
    const axios = useContext(axiosContext)
    const http = useFetch(axios)
    const [swiperList, setSwiperList] = useState([])

    useEffect(() => {
        (async ()=>{
            let result = await http.current.get({ url: '/swiper' })
            setSwiperList(result.data)
        })()
    }, [http])

    return (
        <HomeSwiperWrapper>
            <Swiper
                spaceBetween={20}
                autoplay
                loop
                pagination
            >
                {
                swiperList.map(item => {
                    return (
                    <SwiperSlide key={item.id}>
                        <div>
                        <img src={item.img} alt="" />
                        </div>
                    </SwiperSlide>
                    )
                })
                }
            </Swiper>
        </HomeSwiperWrapper>
    )
}
